<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="/js/jquery.min.js"></script>
    <script>
        $(function() {

            $('.comment').on('mouseover', function (event) {
//                $(this).children('.operation').addClass('operation-hover');
                $(this).children('.operation').css('visibility','visible');
                event.stopPropagation();//阻止时间继续传播
            });
            $('.comment').on('mouseout', function (event) {
//                $(this).children('.operation').addClass('operation-hover');
                $(this).children('.operation').css('visibility','hidden');
                event.stopPropagation();//阻止时间继续传播
            });
            $('.reply').click(function(){
//                console.log($(this).parents('.comment'));
//                console.log($(this).data('target'));
//                console.log($(this).data('article'));
                var $this = $(this);
                var comment = $this.parents('.comment').get(0);//获取直接父节点.comment
                if($(comment).children('.replyForm').length>0){//这说明评论中有一个评论框了
                    $('.replyForm').remove();
                    return false;
                }
                var target = $this.data('target');
                var article = $this.data('article');
                $('.replyForm').remove();
                $(comment).append('<div class="replyForm"><form method="post" action="/comment/reply"><textarea rows="5" name="content"></textarea>' +
                        '<button type="submit">发表</button>' +
                        '<input type="hidden" name="pId" value="'+target+'">' +
                        '<input type="hidden" name="articleId" value="'+article+'">' +
                        '</form></div>');
//                alert('test');
            })
        });

    </script>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            font-size: 14px;
            background-color: #ebebeb;
        }
        .container{
            margin: 50px auto 0 auto;
            width: 600px;
        }
        article{
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
        }

        article .header{
            text-align: center;
            /*padding: 10px;*/
            /*line-height: 40px;*/
        }
        article .header span{
            font-size: 10px;
        }
        article .content{
            border-bottom: 1px solid #808080;
            padding-bottom: 10px;
        }
        article .content a{
            display: inline-block;
            width: 60px;
            height: 30px;
            border-radius: 3px;
            border: 1px solid darkgray;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            background-color: lightgrey;
            color: black;
        }
        article .keys{
            padding-top: 10px;
        }

        .comments{
            padding: 20px;
            background-color: white;
            line-height: 20px;
            margin-bottom: 20px;
        }
        .comments p{
            padding: 0;
            margin: 9px 3px 0 0;
            /*margin-top: 9px;*/
            /*margin-right: 3px;*/
        }
        .comments > .comment{
            margin-bottom: 10px;
            border: none;
            border-bottom:1px dotted grey;
        }
        .comment{
            border: 1px solid #808080;
            padding: 2px;
        }
        /*.comment:hover >.operation{*/
        /*display: block;*/
        /*visibility: visible;*/
        /*}*/
        .operation-hover{
            display: block;
            visibility: visible;
        }
        .comment span{
            float:right;
        }

        .operation{
            /*overflow: hidden;*/
            text-align: right;
            line-height: 16px;
            visibility: hidden;
        }
        .last-op{
            text-align: right;
            line-height: 16px;
        }
        .operation:after{
            clear: both;
        }
        .operation a{

            /*float: right;*/
        }

        .replyForm textarea{
            width: 100%;
        }
        /*.replySection{*/
        /*padding: 10px;*/
        /*background-color: #ebebeb;*/
        /*}*/
        .replySection textarea{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <article>
            <div class="header">
                <h3><property value={title}></property></h3>
                <p><span>作者：<a href="/article/listbyuser?id=<property value={userId}></property>"><property value={nickname}></property></a></span>&nbsp;<span><property value={date}></property></span></p>
            </div>
            <div class="content">
                <p><property value={content}></property></p>

            </div>
            <div class="keys">
                <span><property value={keys}></property></span>
            </div>
        </article>
        <div class="comments">
            <!--<div class="comment">
                <p>第一条评论</p>
            </div>
            <div class="comment">
                <div class="comment">
                    <div class="comment">
                        <div class="comment">
                            <p>第一条评论</p>
                        </div>
                        <p>子评论</p>
                    </div>
                    <p>子评论</p>
                </div>

            </div>-->
            <property value={comments}></property>
        </div>
        <div class="replySection">
            <form action="/comment/reply" method="post">
                <textarea rows="5" name="content"></textarea>
                <input type="hidden" name="articleId" value="<property value={_id}></property>">
                <button type="submit">发表</button>
            </form>
        </div>
    </div>
</body>
</html>